<template>
  <div class="articleConatiner dis-flex">
    <div class="left flex-box b-f flex-y">
      <div class="head">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{
                        path: `/dynamic`,
                    }">
            新闻中心
          </el-breadcrumb-item>
          <el-breadcrumb-item> 文章详情 </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="t-c title">{{ data.detail.title }}</div>
      <div class="t-c subTitle">发表日期： {{ data.detail.create_time }}</div>
      <div class="content" v-html="data.detail.content"></div>
      <div class="btnShell flex-row">
        <NuxtLink :to="{path: `/article/${data.prev.article_id}`}" class="btn flex-box one-line-hide" v-if="data.prev">上一篇: {{data.prev.title}}</NuxtLink>
        <div class="btn flex-box one-line-hide mr-0" v-else>上一篇：已经第一篇了</div>
        <div class="btn cursor flex-box" @click="back">返回</div>
        <NuxtLink :to="{path: `/article/${data.next.article_id}`}" class="btn flex-box one-line-hide mr-0" v-if="data.next">下一篇: {{data.next.title}}</NuxtLink>
        <div class="btn flex-box one-line-hide mr-0" v-else>下一篇：已经是最后一篇了</div>
      </div>

    </div>
    <div class="right  b-f" v-if="data.detail&&data.detail.category_id">
      <h2>相关新闻</h2>
      <div class="recommendbox">
        <NuxtLink :to="{path: `/article/${item.article_id}`}" class="recommendItem flex-row" v-for="item in recommendList" :key="item.article_id">
          <span class="dot"></span>
          <span class="title one-line-hide">{{item.title}}</span>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
import serverRequest from "~/composables/useServerRequest";
import clientRequest from "~/composables/useClientRequest";
const route = useRoute();
const id = route.params.id;
const data = await serverRequest.get("news/details", { articleId: id });
/**
 * 头部设置
 */
const keywords = computed(() => {
  return data.detail.title;
});

const description = computed(() => {
  return data.detail.brief;
});
useHead({
  titleTemplate: (titleChunk) => {
    return data.detail.title;
  },
  meta: [
    { name: "keyword", content: keywords },
    { name: "description", content: description },
  ],
});

onMounted(() => {
  getRecommend();
});
const recommendList = ref([]);
function getRecommend() {
  clientRequest
    .get("news/recommend", {
      categoryId: data.detail.category_id,
    })
    .then((result) => {
      recommendList.value = result.data.list;
    })
    .catch((err) => {})
    .finally(() => {});
}
const router = useRouter();
function back() {
  const pageBack = router.options?.history?.state?.back;
  if (pageBack) {
    if (pageBack.indexOf("article") !== -1) {
      navigateTo({ path: "/dynamic" }, { replace: true });
    } else {
      router.back();
    }
  } else {
    navigateTo({ path: "/" }, { replace: true });
  }
}
</script>

<style lang="scss" >
@use "./index.scss";
</style>